<template>
  <div>
    <el-row :gutter="10" justify="end" type="flex">
      <el-col :span="6">
        <el-select v-model="currentYear" size="mini" @change="change">
          <el-option
            v-for="item in yearList"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="currentMonth" size="mini" @change="change">
          <el-option
            v-for="item in 12"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-calendar v-model="value">
      <template
        #dateCell="{ date }"
      >{{ date.getDate() }}
        <span
          v-if="date.getDay() === 6 || date.getDay()===0"
          class="current"
        >休</span></template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      value: new Date(),
      yearList: [],
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1
    }
  },
  computed: {},
  watch: {},
  created() {
    const start = this.currentYear - 5
    const arr = []
    for (let i = 0; i <= 10; i++) {
      arr.push(start + i)
    }
    this.yearList = arr
  },
  methods: {
    change() {
      this.value.setFullYear(this.currentYear)
      this.value.setMonth(this.currentMonth - 1)
      const y = this.value.getFullYear()
      const m = this.value.getMonth()
      const d = this.value.getDate()
      this.value = new Date(y, m, d) // 根据旧的日期对象创建一个新的日期对象赋值,触发日历变化
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-calendar__header {
  display: none;
}
.current{
  background-color: pink;
  display: inline-block;
  width:16px;
  height:16px;
  text-align: center;
  line-height: 16px;
  border-radius: 50%;
  font-size:14px;
  color: #fff;
}
</style>
